<template>
  <div class="about-wrapper">
    <div class="content">
      <div class="header">
        <img
          src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC83ZjUzNzQxOWNkYjdjOTM1MjJiYTFiZWIzMGVlMjE1Yi05MC53ZWJw.webp"
          alt=""
        />
      </div>
      <div class="middle">
        <div class="left">
          <img
            src="https://ccdn.goodq.top/caches/2729acc48f69194563f94b87d1ea86c4/aHR0cDovLzViYzZlZDU5MWU3NDMudDczLnFpZmVpeWUuY29tL3FmeS1jb250ZW50L3VwbG9hZHMvMjAxOC8xMC84ZDE0ZDAxMmE2NDAxMThhN2U5ZGYzNDVhYTgzNWRiMS05MC53ZWJw.webp"
            alt=""
          />
        </div>
        <div class="right">
          <div class="title">关于我们</div>
          <div class="desc">专业、便捷、安全并驾齐驱，口碑是我们的立身之本</div>
          <div class="text">
            我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。起飞页提供了海量精美网站模板和成品网站，起飞页的核心竞争力来自于它集流线式布局方案与可视化内容编辑于一体，支持打字传图、自由拖拽，不需要专业编写代码，也没有其他建站工具的层叠式烦恼，您可以随心所欲创建区块、添加组件。
            我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。起飞页提供了海量精美网站模板和成品网站，起飞页的核心竞争力来自于它集流线式布局方案与可视化内容编辑于一体，支持打字传图、自由拖拽，不需要专业编写代码，也没有其他建站工具的层叠式烦恼，您可以随心所欲创建区块、添加组件。我们的流线式网页布局设计方案和可视化图文内容编辑模式让网站制作和维护成为一件轻松惬意的事。起飞页提供了海量精美网站模板和成品网站，起飞页的核心竞争力来自于它集流线式布局方案与可视化内容编辑于一体您可以随心所欲创建区块、添加组件。
          </div>
        </div>
      </div>
      <div class="footer">
        <div class="item">
          <p class="top">2005年</p>
          <p>正式成立</p>
        </div>
        <div class="item">
          <p class="top">80+</p>
          <p>服务家庭超过80万户</p>
        </div>
        <div class="item">
          <p class="top">360+</p>
          <p>累计服务次数超过360万次</p>
        </div>
        <div class="item">
          <p class="top">100+</p>
          <p>注册用户数超100万</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
.about-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  .content {
    width: 1280px;
    .header {
      margin: 40px 0;
    }
    .middle {
      display: flex;
      margin-bottom: 80px;
      .left {
        width: 487.5px;
        height: 595px;
        margin-right: 100px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        width: 530px;
        height: 595px;
        .title {
          height: 50px;
          line-height: 50px;
          text-align: center;
          border: 1px solid #999;
          font-size: 24px;
          color: #333;
        }
        .desc {
          margin: 20px 0;
          text-align: center;
          color: rgb(196, 153, 106);
          font-size: 15px;
        }
        .text {
          line-height: 30px;
          font-size: 14px;
        }
      }
    }
    .footer {
      display: flex;
      justify-content: space-around;
      margin-bottom: 100px;
      .item {
        line-height: 24px;
        text-align: center;
        .top {
          line-height: 40px;
          font-size: 30px;
          color: #e6454a;
        }
      }
    }
  }
}
</style>

